import { Ref, ref } from 'vue'
import { PlatformFrameState } from '@/qiankun/frame-lib'
import { isDev } from '@/config'
import { useRouter } from 'vue-router'
import * as routerNames from '@/router/name'
import { ElMessage } from 'element-plus'
import { compatUrl } from '@lhy-assist/utils'
import { PlatformAppRegistryConfig, qiankunFrame } from '@/qiankun/frame/frame'

const appVue3: PlatformAppRegistryConfig = {
  name: 'qiankun-app-vue3',
  entry: isDev ? 'http://localhost:8082' : 'http://120.27.11.181/qiankun-app-vue3',
  activeRule: import.meta.env.BASE_URL + 'frame/app-vue3',
}
const appVue2: PlatformAppRegistryConfig = {
  name: 'qiankun-app-vue2',
  entry: isDev ? 'http://localhost:8081' : 'http://120.27.11.181/qiankun-app-vue2',
  activeRule: import.meta.env.BASE_URL + 'frame/app-vue2',
}
const appConfigurationMxgraph: PlatformAppRegistryConfig = {
  name: 'app-configuration-mxgraph',
  entry: isDev ? 'http://localhost:8080' : 'http://120.27.11.181/app-configuration-mxgraph',
  activeRule: import.meta.env.BASE_URL + 'frame/app-configuration-mxgraph',
}
export const apps = [appVue3, appVue2, appConfigurationMxgraph]

export enum MenuType {
  MICRO,
  IFRAME,
}

export class Menu implements MenuConfig {
  protected static MENU_MAP = new Map<number, Menu>()

  public static getMenu(menuId: number) {
    return this.MENU_MAP.get(menuId)
  }

  public id: number
  public title: string
  public url?: string
  public type?: MenuType
  public children?: Menu[]

  constructor(config: MenuConfig) {
    this.id = config.id
    this.title = config.title
    this.url = config.url
    this.type = config.type
    this.children = config.children

    Menu.MENU_MAP.set(this.id, this)
  }
}

export interface MenuConfig {
  id: number
  title: string
  url?: string
  type?: MenuType
  children?: Menu[]
}

let index = 1
export const menus: Menu[] = [
  new Menu({
    id: index++,
    title: 'Vue3',
    children: [
      new Menu({
        id: index++,
        title: '日志管理',
        type: MenuType.MICRO,
        url: import.meta.env.BASE_URL + 'frame/app-vue3/#/log',
      }),
      new Menu({
        id: index++,
        title: '系统配置',
        type: MenuType.MICRO,
        url: import.meta.env.BASE_URL + 'frame/app-vue3/#/setting',
      }),
    ],
  }),
  new Menu({
    id: index++,
    title: 'Vue2',
    children: [
      new Menu({
        id: index++,
        title: 'Demo管理',
        type: MenuType.MICRO,
        url: import.meta.env.BASE_URL + 'frame/app-vue2/#/demo',
      }),
    ],
  }),
  new Menu({
    id: index++,
    title: '展示组态',
    children: [
      new Menu({
        id: index++,
        title: '编辑器',
        type: MenuType.MICRO,
        url: import.meta.env.BASE_URL + 'frame/app-configuration-mxgraph/#/editor',
      }),
      new Menu({
        id: index++,
        title: '展示页',
        type: MenuType.MICRO,
        url: import.meta.env.BASE_URL + 'frame/app-configuration-mxgraph/#/viewer',
      }),
      new Menu({
        id: index++,
        title: 'iframe-编辑器',
        type: MenuType.IFRAME,
        url: appConfigurationMxgraph.entry + '/#/editor',
      }),
      new Menu({
        id: index++,
        title: 'iframe-展示页',
        type: MenuType.IFRAME,
        url: appConfigurationMxgraph.entry + '/#/viewer',
      }),
    ],
  }),
]

const adminInfo = ref<PlatformFrameState>()
qiankunFrame.onStateChange(value => {
  // console.log('frame', value)
  adminInfo.value = value
})

export function useAdminInfo() {
  return {
    adminInfo: adminInfo as Ref<PlatformFrameState>,
  }
}

/**
 * iframe加载路由
 *
 * @export
 * @returns
 */
export function useIframeRouter() {
  const loading = ref(false)
  const router = useRouter()
  const loadIframe = (url: string) => {
    const iframe = document.createElement('iframe')

    loading.value = true
    iframe.onerror = err => {
      loading.value = false
      ElMessage.error(JSON.stringify(err))
    }
    iframe.onload = () => {
      loading.value = false
    }
    iframe.src = compatUrl(url, {
      __: Date.now(),
    })

    return iframe
  }
  const goRouter = (viewEl: HTMLElement, menu: Menu) => {
    router.push({
      name: routerNames.FRAME,
      query: {
        __: Date.now(),
      },
    })

    setTimeout(() => {
      viewEl.innerHTML = ''
      viewEl.appendChild(loadIframe(menu.url as string))
    })
  }

  return {
    loading,
    goRouter,
  }
}
